<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.js"></script>
    <style>
         [v-clock]{
                    display:none
                }
    </style>
</head>
<body>
    <div id="app">
        <div v-clock>{{msg}}</div>
        <!-- {{}} 插值表达式 
                    将数据填充到HTML标签中
                    插值表达式支持基本的计算操作
        -->
        <div>{{1+2}}</div>
        <div>{{msg + '...............'+123}}</div>
    </div>
    <script>
        /*
        v-clock指令用法：
            1.提供样式
                [v-clock]{
                    display:none
                }
            2.在插值表达式所在的标签中添加v-clock指令

            原理：先通过样式进行隐藏，然后再内存中进行值得替换
                    替换好之后再显示最终的结果
        */
       var vm = new Vue({
           //el 元素的挂载位置（值可以是css选择器或者DOM元素）
           el:'#app',
           //data：模型数据（值是一个对象）
           data:{
                msg:'hello Vue'
           }
       })
    </script>
</body>
</html>
